{% extends 'web_base.html' %}
{% load staticfiles %}
{% block title %}
    订单页
{% endblock %}
{% block css_js %}
    <link rel="stylesheet" href={% static "css/order.css" %}>

{% endblock %}







{% block web_body %}
    <!-- order_body -->
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-7">
                <div class="left">
                    <h4>账单地址</h4>
                    <h5>省市区 *</h5>
                    <div class="form-group">
                        <select id="pro" class="form-control sel">
                            <option value="0">--- 选择省 ---</option>

                        </select>

                        <select id="city" class="form-control sel">
                            <option value="0">--- 选择市 ---</option>

                        </select>
                        <select id="dis" class="form-control sel">
                            <option value="0">--- 选择区 ---</option>

                        </select>
                    </div>
                    <br>

                    <div class="form-group">
                        <label for="name">地址 *</label>
                        <input type="text" class="form-control addr" value="{{ address.addr }}" name="username"
                               placeholder="文本输入">
                    </div>
                    <div class="form-group">
                        <label for="name">姓名*</label>
                        <input type="text" class="form-control reciver" value="{{ address.reciver }}" name="username"
                               placeholder="文本输入">
                    </div>
                    <div class="row">

                        <div class="form-group col-lg-6 col-xs-6">
                            <label for="name">Email</label>
                            <input type="text" class="form-control email" value="{{ address.mail }}" name="mail"
                                   placeholder="文本输入">
                        </div>
                        <div class="form-group col-lg-6  col-xs-6">
                            <label for="name">电话*</label>
                            <input type="text" class="form-control tel" value="{{ address.tel }}" name="tel"
                                   placeholder="文本输入">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class="checkbox">
                                    <label>
                                        <input class="remember" name="remember" type="checkbox">请记住我
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" value="{{ goods_str }}" name='goods_id'/>
                </div>
            </div>
            <div class="col-lg-5 col-md-5">
                <div class="right">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>商品</th>
                            <th>价钱</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% csrf_token %}
                        {% for goods in goodlist %}
                            <tr>

                                <td>{{ goods.name }} × {{ goods.count }}</td>
                                <td>¥{{ goods.price }}</td>
                            </tr>
                        {% endfor %}



                        <td class="totall">订单总计{{ count }}件</td>
                        <td class="total_price">¥{{ amount }}</td>
                        </tr>

                        </tbody>
                    </table>
                    <label class="radio-inline">
                        <input type="radio" name="pay" id="pay" checked value="option1"> 支付宝 <img
                            src={% static "media/alipay.png" %} alt="">
                    </label>
                    <div class="info">
                        使用支付宝付款,目前只支持支付宝付款
                    </div>
                    <br>
                    <button class="sub">到支付宝支付</button>
                </div>

            </div>
        </div>
    </div>
    <!-- /order_body -->


{% endblock %}

{% block end_js %}
    <script>
        $(function () {
            var pay = $('#pay');
            var info = $('.info');

            var pro = $('#pro');
            var city = $('#city');
            var dis = $('#dis');
            var address = $('.address');
            var commit = $('.sub');
            commit.click(function () {
                goods_str = $('input[name="goods_id"]').val();
                csrf = $('input[name="csrfmiddlewaretoken"]').val();
                recive_addr = $('.addr').val();
                reciver = $('.reciver').val();
                tel = $('.tel').val();
                email = $('.email').val();
                remember = $('.remember').is(':checked');
                context = {
                    'goods_str': goods_str,
                    'csrfmiddlewaretoken': csrf,
                    'reciver_addr': recive_addr,
                    'reciver': reciver,
                    'tel': tel,
                    'email': email,
                    'remember': remember
                };
                $.post('/computer/order/commit', context, function (data) {
                    alert(data.errmsg)
                    if(data.res == 4){
                        window.open('/computer/user/user_info')
                    }
                })
            });

            $.get('/computer/order/area/', function (dic) {
                $.each(dic.data, function (index, item) {
                    pro.append('<option value=' + item[0] + '>' + item[1] + '</option>');
                });
                Get_options();
            });
            pro.change(function () {

                $.get('/computer/order/area2_' + $(this).val() + '/', function (dic) {
                    city.empty().append('<option value="0">请选择</option>');
                    dis.empty().append('<option value="0">请选择</option>')
                    $.each(dic.data, function (index, item) {
                        city.append('<option value=' + item[0] + '>' + item[1] + '</option>');
                    })
                });
                Get_options();
            });
            city.change(function () {
                $.get('/computer/order/area2_' + $(this).val() + '/', function (dict) {

                    dis.empty().append('<option value="0">请选择区县</option>')
                    $.each(dict.data, function (index, item) {
                        dis.append('<option value=' + item[0] + '>' + item[1] + '</option>');
                    })

                });
                Get_options();
            });
            dis.change(function () {
                Get_options()
            });

            function Get_options() {

                pro_opt = '';
                city_opt = '';
                dis_opt = '';
                if (pro.val() != 0) {
                    pro_opt = pro.find("option:selected").text()+'.'
                }

                if (city.val() != 0) {
                    city_opt = city.find("option:selected").text()+'.'
                }

                if (dis.val() != 0) {
                    dis_opt = dis.find("option:selected").text()+'.'
                }
                address.val(pro_opt + city_opt + dis_opt)

            }


            pay.click(function () {
                info.fadeToggle('slow')
            })


        })
    </script>
{% endblock %}



